<!-- src/components/DynamicMenu.vue -->

<template>
    <el-menu
            :default-active="$route.path"
            mode="vertical"
            background-color="#fff"
            text-color="#303133"
            active-text-color="#409EFF"
            @select="handleSelect"
    >
        <el-submenu v-for="(item, index) in menuList" :key="item.id" :index="item.path">
            <template #title>
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
            </template>

            <!-- 递归渲染子菜单 -->
            <dynamic-menu-item
                    v-for="subItem in item.children"
                    :key="subItem.id"
                    :item="subItem"
            />
        </el-submenu>
    </el-menu>
</template>

<script>
import { defineComponent, ref } from 'vue'
import DynamicMenuItem from './DynamicMenuItem.vue' // 引入递归子组件
import axios from 'axios';

export default defineComponent({
    components: {
        DynamicMenuItem
    },
    setup() {
        const menuList = ref([]) // 假设这是你的菜单数据，可以从后端获取

        // 初始化或异步获取菜单数据
        async function fetchMenuData() {
            const response = await axios.get('/api/menu') // 使用 Fetch API 或 Axios 等获取数据

            const data = await response.data.data;
            console.log(data)
            menuList.value = data
            console.log(menuList.value)
            console.log(menuList)
        }

        fetchMenuData()

        const handleSelect = (item) => {
            // 处理菜单选中事件，例如路由跳转等
            console.log('Selected menu:', item)
        }

        return {
            menuList,
            handleSelect
        }
    },

    // created() {
    //     const _this = this  // 这里的this是全局
    //     this.$axios.get("/api/menu").then(function (resp){		// 因为我们在main.js文件配置了后端端口的访问地址(下文有讲)，所以这里可以直接'/select/'
    //         _this.students = resp.data  // 这里如果用this指得就是这个匿名函数了
    //     })
    // }
})
</script>
